<!--
 * @Author: zulezhe
 * @Date: 2021-01-12 17:53:01
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-05-10 09:59:33
 * @Description: In User Settings Edit
 * @FilePath: \canvas\01-基本\04.绘制标尺.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    html,
    body,
    #canvas-container {
      width: 100%;
      height: 100%;
      background-color: #000;
    }

    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="canvas-container"></div>
  <script>
    function initCanvas(el, width, height) {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = width;
      canvas.height = height;
      document.getElementById(el).appendChild(canvas);
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, width, 40);
      ctx.fillRect(0, 0, 40, height);
      for (let i = 0; i < width - 40; i += 5) {
        if (i % 50 == 0) {
          ctx.beginPath();
          ctx.moveTo(i + 0.5 + 40, 10);
          ctx.lineTo(i + 0.5 + 40, 40);
          ctx.fillStyle = "red";
          ctx.fillText(i, i + 0.5 + 40, 25);
          ctx.stroke();
        } else {
          ctx.beginPath();
          ctx.moveTo(i + 0.5 + 40, 30);
          ctx.lineTo(i + 0.5 + 40, 40);
          ctx.stroke();
        }
      }
      for (let i = 0; i < height - 40; i += 5) {
        if (i % 50 == 0) {
          ctx.beginPath();
          ctx.moveTo(10, i + 0.5 + 40);
          ctx.lineTo(40, i + 0.5 + 40);
          ctx.fillStyle = "red";
          ctx.fillText(i, 10, i + 0.5 + 30);
          ctx.stroke();
        } else {
          ctx.beginPath();
          ctx.moveTo(30, i + 0.5 + 40);
          ctx.lineTo(40, i + 0.5 + 40);
          ctx.stroke();
        }
      }
    }
    window.onload = () => {
      initCanvas("canvas-container", "1910", "950");
    };
  </script>
</body>

</html>